<script setup lang="ts">
import { useStore } from "~/models/data";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import { sToNum } from './../utils/funcs';

const NumReg = /^[0-9]*$/

let { processNum, resourceNum } = storeToRefs(useStore())
let process = ref('')
let resource = ref('')

function processCheck() {
  if (process.value === '') {
    return false
  }
  if (!NumReg.test(process.value.trim())) {
    process.value = ''
    return false
  }
  return true
}
function resourceCheck() {
  if (resource.value === '') {
    return false
  }
  if (!NumReg.test(resource.value.trim())) {
    resource.value = ''
    return false
  }
  return true
}

const router = useRouter()
function go() {
  if (process.value === '' || resource.value === '') {
    ElMessage({
      message: '数据不完整',
      type: 'error'
    })
    return
  }
  const flag1 = processCheck()
  const flag2 = resourceCheck()
  if (!flag1 || !flag2) {
    ElMessage({
      message: '输入格式错误',
      type: 'error'
    })
    return
  }
  processNum.value = sToNum(process.value)
  resourceNum.value = sToNum(resource.value)
  router.push("/two")
}

</script>

<template>

  <div>
    <p className="text-3xl text-blue-500">银行家算法</p>

    <div className="py-4" />

    <input v-model="process" placeholder="请输入进程数" type="text" autocomplete="false"
      className="px-4 py-2 w-250px bg-transparent text-center border border-rounded border-gray-200 dark:border-gray-700 outline-none active:outline-none" />
    <br />
    <div className="py-2" />
    <input v-model="resource" placeholder="请输入资源种类数" type="text" autocomplete="false"
      className="px-4 py-2 w-250px bg-transparent text-center border border-rounded border-gray-200 dark:border-gray-700 outline-none active:outline-none" />
    <div>
      <button className="btn m-3 text-sm" @click="go">
        下一步
      </button>
    </div>
  </div>
</template>
